<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="always" class="detail-card top_card" header="重点数据指标">
                    <div style="height: 60px;">
                        <el-row>
                            <el-col :span="6">
                                <div class="statistic-card">
                                    <el-statistic :value="complaintStatistic.complaintDayCount">
                                        <template #title>
                                            <div style="display: inline-flex; align-items: center">
                                                今日投诉量
                                                <el-tooltip effect="dark" content="今日宁波市广义投诉总量" placement="top">
                                                    <el-icon style="margin-left: 4px" :size="12">
                                                        <Warning />
                                                    </el-icon>
                                                </el-tooltip>
                                            </div>
                                        </template>
                                    </el-statistic>
                                    <!-- <div class="statistic-footer">
                                        <div class="footer-item">
                                            <span>较昨天</span>
                                            <span class="green">
                                                24%
                                                <el-icon>
                                                    <CaretTop />
                                                </el-icon>
                                            </span>
                                        </div>
                                    </div> -->
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="statistic-card">
                                    <el-statistic :value="complaintStatistic.complaintMonthCount">
                                        <template #title>
                                            <div style="display: inline-flex; align-items: center">
                                                当月投诉量
                                                <el-tooltip effect="dark" content="本月宁波市广义投诉总量" placement="top">
                                                    <el-icon style="margin-left: 4px" :size="12">
                                                        <Warning />
                                                    </el-icon>
                                                </el-tooltip>
                                            </div>
                                        </template>
                                    </el-statistic>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="statistic-card">
                                    <el-statistic :value="complaintStatistic.tenThousandComplaintRatio"
                                        group-separator="," :precision="2">
                                        <template #title>
                                            <div style="display: inline-flex; align-items: center">
                                                万投比
                                            </div>
                                        </template>
                                    </el-statistic>
                                    <!-- <div class="statistic-footer">
                                        <div class="footer-item">
                                            <span>较昨天</span>
                                            <span class="green">
                                                16%
                                                <el-icon>
                                                    <CaretTop />
                                                </el-icon>
                                            </span>
                                        </div>
                                    </div> -->
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="statistic-card">
                                    <el-statistic :value="complaintStatistic.repeatedComplaintRate" suffix="%"
                                        group-separator="," :precision="2">
                                        <template #title>
                                            <div style="display: inline-flex; align-items: center">
                                                重复投诉率
                                            </div>
                                        </template>
                                    </el-statistic>
                                    <!-- <div class="statistic-footer">
                                        <div class="footer-item">
                                            <span>较昨天</span>
                                            <span class="green">
                                                16%
                                                <el-icon>
                                                    <CaretTop />
                                                </el-icon>
                                            </span>
                                        </div>
                                    </div> -->
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <el-divider />
                    <el-row>
                        <el-table style="margin-top: 0px;" :data="complaintTableData">
                            <el-table-column prop="categoryName" label="类别" width="200" align="center" />
                            <el-table-column prop="complaintDayCount" label="当日投诉量" width="100" align="center" />
                            <el-table-column prop="complaintMonthCount" label="当月投诉量" align="center" />
                        </el-table>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="always" class="detail-card top_card">
                    <template #header>
                        <div class="card-header">
                            <span>广义投诉量小时趋势图</span>
                            <el-select class="header-select" v-model="trendSelect" placeholder="Select" size="small"
                                @change="changeTrendType">
                                <el-option key="15分钟级" label="15分钟级" value="15min" />
                                <el-option key="半小时级" label="半小时级" value="halfHour" />
                                <el-option key="小时级" label="小时级" value="hour" />
                            </el-select>
                        </div>
                    </template>
                    <div id='echart1' style="width: 100%;height:300px"></div>
                </el-card>
            </el-col>

        </el-row>
        <el-row :gutter="20" style="margin-top: 10px;">
            <!-- <el-col :span="12">
                <el-card shadow="always" class="detail-card" header="区县投诉指标">
                    <el-table class="table_wrap" style="height: 500px;" :data="complaintCountyTableData">
                        <el-table-column prop="county" label="区县" width="120" align="center" />
                        <el-table-column prop="complaintDayCount" sortable label="当日投诉量" width="150" align="center" />
                        <el-table-column prop="complaintWeekCount" sortable label="本周投诉量" width="150" align="center" />
                        <el-table-column prop="complaintMonthCount" sortable label="本月投诉量" min-width="150"
                            align="center" />
                    </el-table>
                </el-card>
            </el-col> -->
            <el-col :span="12">
                <el-card shadow="always" class="detail-card has_svg" header="区县投诉对比图">
                    <img src="../../assets/icons/echarts_change.svg" alt="" @click="tableQxToggle" />
                    <div id='countyBar' style="width: 100%;height:400px" v-show="qxFlag"></div>
                    <el-table v-show="!qxFlag" class="table_wrap" :data="complaintCountyTableData">
                        <el-table-column prop="county" label="区县" width="120" align="center" />
                        <el-table-column prop="complaintDayCount" sortable label="当日投诉量" width="150" align="center" />
                        <el-table-column prop="complaintWeekCount" sortable label="本周投诉量" width="150" align="center" />
                        <el-table-column prop="complaintMonthCount" sortable label="本月投诉量" min-width="150"
                            align="center" />
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="always" class="detail-card">
                    <template #header>
                        <div class="card-header">
                            <span>宁波广义投诉量日趋势图</span>
                        </div>
                    </template>
                    <div id='echart' style="width: 100%;height:400px"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px;">

            <!-- <el-col :span="12">
                <el-card shadow="always" class="detail-card" header="全省广义投诉数据">
                    <el-table class="table_wrap qsts_tb_wrap" :data="complaintCityTableData">
                        <el-table-column prop="city" label="地市" width="120" align="center" />
                        <el-table-column prop="complaintDayCount" label="今日广义投诉量" sortable width="150" align="center" />
                        <el-table-column prop="complaintMonthCount" label="本月广义投诉量" sortable width="150"
                            align="center" />
                        <el-table-column prop="tenThousandComplaintRatio" label="万投比" sortable width="150"
                            align="center" />
                        <el-table-column prop="repeatedComplaintNum" label="重复投诉量" sortable width="150"
                            align="center" />
                        <el-table-column prop="repeatedComplaintRate" label="重复投诉率" sortable min-width="200"
                            align="center" />
                    </el-table>
                </el-card>
            </el-col> -->
            <el-col :span="12">
                <el-card shadow="always" class="detail-card has_svg" header="全省广义投诉对比图">
                    <img src="../../assets/icons/echarts_change.svg" alt="" @click="tableQsToggle" />
                    <div id='cityBar' style="width: 100%;height:400px" v-show="qsFlag"></div>
                    <el-table v-show="!qsFlag" class="table_wrap qsts_tb_wrap" :data="complaintCityTableData">
                        <el-table-column prop="city" label="地市" width="120" align="center" />
                        <el-table-column prop="complaintDayCount" label="今日广义投诉量" sortable width="150" align="center" />
                        <el-table-column prop="complaintMonthCount" label="本月广义投诉量" sortable width="150"
                            align="center" />
                        <el-table-column prop="tenThousandComplaintRatio" label="万投比" sortable width="150"
                            align="center" />
                        <el-table-column prop="repeatedComplaintNum" label="重复投诉量" sortable width="150"
                            align="center" />
                        <el-table-column prop="repeatedComplaintRate" label="重复投诉率" sortable min-width="200"
                            align="center" />
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="always" class="detail-card" header="全省广义投诉日趋势图">
                    <div id='echart2' style="width: 100%;height:400px"></div>
                </el-card>
            </el-col>
        </el-row>
        <!--  <el-row :gutter="20" style="margin-top: 10px;">
        </el-row> -->
    </div>
</template>

<script setup name="report">
import * as echarts from 'echarts';
import { onMounted, render } from 'vue';
import { queryComplaintStatistic, queryComplaintCounty, queryComplaintDaily, queryComplaintMinutely, queryComplaintCityStatistic, queryComplaintCityDaily } from '@/api/complain/complain';

const complaintStatistic = ref({})
const complaintTableData = ref([])
const complaintCountyTableData = ref([])
const complaintCountyData = ref({})
const complaintCityData = ref({})
const complaintMinuteData = ref({})
const complaintCityTableData = ref([])
const trendSelect = ref("15min")

let qxFlag = ref(true)
let qsFlag = ref(true)

const tableQxToggle = () => {
    qxFlag.value = !qxFlag.value
}
const tableQsToggle = () => {
    qsFlag.value = !qsFlag.value
}

function initChart() {
    var myChart = echarts.init(document.getElementById("echart"))
    var option;

    let seriesData = []
    if (complaintCountyData.value.complaintDailyItemVoList) {
        var temp = complaintCountyData.value.complaintDailyItemVoList
        for (var i = 0; i < temp.length; i++) {
            let countList = []
            for (var j = 0; j < temp[i].countList.length; j++) {
                countList.push(temp[i].countList[j])
            }
            var item = {
                name: temp[i].name,
                type: 'line',
                data: countList
            }
            seriesData.push(item)
        }
    }

    option = {
        legend: {
            data: complaintCountyData.value.nameList,
            selected: {
                '总计': false,
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            name: '日期',
            data: complaintCountyData.value.dateList
        },
        yAxis: {
            type: 'value',
            name: '投诉量'
        },
        series: seriesData
    };

    option && myChart.setOption(option);
}

function initChart1() {
    var myChart = echarts.init(document.getElementById("echart1"))
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: complaintMinuteData.value.nameList,
            axisLabel: {
                padding: [0, 0, 0, -25],
                interval: 0, // 横轴信息全部显示
                rotate: 45,
                interval: 0, // 标签的显示间隔
                textStyle: {
                    color: '#000',
                    fontSize: 10.5,
                },
                align: 'left',
            },
        },
        tooltip: {
            trigger: 'axis'
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: complaintMinuteData.value.countList,
                type: 'line',
                smooth: true
            }
        ]
    };

    option && myChart.setOption(option);
}

function initChart2() {
    var myChart = echarts.init(document.getElementById("echart2"))
    var option;
    let seriesData = []
    if (complaintCityData.value.complaintDailyItemVoList) {
        var temp = complaintCityData.value.complaintDailyItemVoList
        for (var i = 0; i < temp.length; i++) {
            let countList = []
            for (var j = 0; j < temp[i].countList.length; j++) {
                countList.push(temp[i].countList[j])
            }
            var item = {
                name: temp[i].name,
                type: 'line',
                data: countList
            }
            seriesData.push(item)
        }
    }
    option = {
        legend: {
            data: complaintCityData.value.nameList
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: complaintCityData.value.dateList
        },
        yAxis: {
            type: 'value'
        },
        series: seriesData
    };

    option && myChart.setOption(option);
}

function initCountyBar() {
    var myChart = echarts.init(document.getElementById("countyBar"))
    var option;

    let countyList = [], dayData = [], weekData = [], monthData = [];
    if (complaintCountyTableData.value) {
        for (var i = 0; i < complaintCountyTableData.value.length; i++) {
            countyList.push(complaintCountyTableData.value[i].county)
            dayData.push(complaintCountyTableData.value[i].complaintDayCount)
            weekData.push(complaintCountyTableData.value[i].complaintWeekCount)
            monthData.push(complaintCountyTableData.value[i].complaintMonthCount)
        }
    }

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['当日投诉量', '本周投诉量', '本月投诉量']
        },
        /* toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
        }, */
        /* toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        }, */
        /* toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {
                    show: true,
                    readOnly: false,
                    optionToContent(opt) {

                        return;
                    }
                },
                saveAsImage: { show: true }
            }
        }, */
        xAxis: [
            {
                type: 'category',
                name: '区县',
                data: countyList
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '日投诉量',
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        //color: colors[2]
                    }
                }
            },
            {
                type: 'value',
                name: '周投诉量',
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        //color: colors[2]
                    }
                }
            },
            {
                type: 'value',
                name: '月投诉量',
                position: 'right',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        //color: colors[2]
                    }
                }
            }
        ],
        series: [
            {
                name: '当日投诉量',
                type: 'bar',
                barGap: 0,
                emphasis: {
                    focus: 'series'
                },
                yAxisIndex: 0,
                data: dayData,
                label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                },
            },
            {
                name: '本周投诉量',
                type: 'bar',
                barGap: 0,
                emphasis: {
                    focus: 'series'
                },
                yAxisIndex: 0,
                data: weekData,
                label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                },
            },
            {
                name: '本月投诉量',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                yAxisIndex: 1,
                data: monthData,
                label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                },
            }
        ]
    };

    option && myChart.setOption(option);
}

function initCityBar() {
    var myChart = echarts.init(document.getElementById("cityBar"))
    var option;

    let cityList = [], dayData = [], monthData = [];
    if (complaintCityTableData.value) {
        for (var i = 0; i < complaintCityTableData.value.length; i++) {
            cityList.push(complaintCityTableData.value[i].city)
            dayData.push(complaintCityTableData.value[i].complaintDayCount)
            monthData.push(complaintCityTableData.value[i].complaintMonthCount)
        }
    }

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['当日投诉量', '本月投诉量']
        },
        /* toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
        }, */
        /* toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                // mark: { show: true },
                dataView: {
                    optionToContent(opt) {
                        // console.log(opt, complaintCityTableData.value)
                        let table = `
                            <table style="width:100%;text-align:center">
                                <thead style="height:30px;line-height:30px">
                                    <tr>
                                        <th>地市</th>
                                        <th>今日广义投诉量</th>
                                        <th>本月广义投诉量</th>
                                        <th>万投比</th>
                                        <th>重复投诉量</th>
                                        <th>重复投诉率</th>
                                    </tr>
                                </thead>
                                <tbody>  
                                    ${complaintCityTableData.value.map((item, index) => {
                            return `
                                                <tr style="height:30px;line-height:30px;font-size=12px">
                                                    <td>${item.city}</td>
                                                    <td>${item.complaintDayCount}</td>
                                                    <td>${item.complaintMonthCount}</td>
                                                    <td>${item.tenThousandComplaintRatio}</td>
                                                    <td>${item.repeatedComplaintNum}</td>
                                                    <td>${item.repeatedComplaintRate}</td>
                                                </tr>
                                            `
                        }).join('')}
                                </tbody>  
                            </table>
                        `;

                        return table;
                    }
                },
                // magicType: { show: true, type: ['line', 'bar', 'stack'] },
                // restore: { show: true },
                saveAsImage: { show: true }
            }
        }, */
        xAxis: [
            {
                type: 'category',
                name: '区县',
                data: cityList
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '日投诉量',
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        //color: colors[2]
                    }
                },
            },
            {
                type: 'value',
                name: '月投诉量',
                position: 'right',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        //color: colors[2]
                    }
                }
            }
        ],
        series: [
            {
                name: '当日投诉量',
                type: 'bar',
                barGap: 0,
                emphasis: {
                    focus: 'series'
                },
                yAxisIndex: 0,
                data: dayData,
                label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                },
            },
            {
                name: '本月投诉量',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                yAxisIndex: 1,
                data: monthData,
                label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                },
            }
        ]
    };
    option && myChart.setOption(option);
}






setTimeout(initChart, 1000)
setTimeout(initChart1, 1000)
setTimeout(initChart2, 1000)
setTimeout(initCountyBar, 1000)
setTimeout(initCityBar, 1000)

function loadStatistic() {
    queryComplaintStatistic().then(res => {
        complaintStatistic.value = res.data
        complaintTableData.value = res.data.complaintCategoryVoList
    })
}

function loadComplaintCounty() {
    queryComplaintCounty().then(res => {
        complaintCountyTableData.value = res.data
        initCountyBar()
    })
}

function loadComplaintDaily() {
    queryComplaintDaily().then(res => {
        complaintCountyData.value = res.data
    })
}

function loadComplaintMinutely() {
    let param = {
        type: trendSelect.value
    }
    queryComplaintMinutely(param).then(res => {
        complaintMinuteData.value = res.data
        initChart1()
    })
}

function loadComplaintCityStatistic() {
    queryComplaintCityStatistic().then(res => {
        complaintCityTableData.value = res.data
        initCityBar()
    })
}

function loadComplaintCityDaily() {
    queryComplaintCityDaily().then(res => {
        complaintCityData.value = res.data
    })
}

function changeTrendType() {
    loadComplaintMinutely()
}


onMounted(() => {
    loadStatistic()
    loadComplaintCounty()
    loadComplaintDaily()
    loadComplaintMinutely()
    loadComplaintCityStatistic()
    loadComplaintCityDaily()
})


</script>

<style lang='scss' scoped>
:deep .qsts_tb_wrap {
    .el-table__body-wrapper {
        tbody {
            tr {
                &:first-child {
                    background: #ffe1e1;
                    color: #000;
                    // font-weight: bold;
                }
            }
        }
    }
}

:deep .detail-card {
    height: 430px;

    .el-table {
        height: 350px;
    }

    &.top_card {
        height: 380px;
    }

    &.has_svg {
        .el-card__body {
            position: relative;

            img {
                position: absolute;
                top: 5px;
                right: 5px;
                width: 20px;
                height: 20px;
                cursor: pointer;
                z-index: 100;
            }
        }
    }


}

.statistic-card {
    height: 100%;
    padding: 20px;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);
}

:global(h2#card-usage ~ .example .example-showcase) {
    background-color: var(--el-fill-color) !important;
}

.el-statistic {
    --el-statistic-content-font-size: 28px;
}

.statistic-card {
    height: 100%;
    padding: 20px;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-top: 16px;
}

.statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.green {
    color: var(--el-color-success);
}

.red {
    color: var(--el-color-error);
}

.card-header {
    position: relative;
    /* 设置为相对定位 */
    padding-right: 100px;
    /* 根据 select 的宽度调整，确保有足够空间 */
}

.card-header .header-select {
    position: absolute;
    right: 0;
    /* 紧靠容器右侧 */
    top: 50%;
    /* 垂直居中的一种方法 */
    transform: translateY(-50%);
    /* 向上移动自身高度的一半来垂直居中 */
}
</style>